<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-07 15:17:14"
-->
<template>
  <!-- <v-container fluid> -->
    <v-data-iterator
      :loading="tableLoading"
      :items="items"
      :items-per-page.sync="itemsPerPage"
      :page="page"
      :sort-by="sortBy.toLowerCase()"
      :sort-desc="sortDesc"
      hide-default-footer>
     <template v-slot:header>
       <v-toolbar flat class="mb-1">
        <v-text-field
        v-model="searchTitle"
        append-icon="search"
        @change="changeHandle"
        dense
        clearable
        flat
        solo-inverted
        hide-details
        label="搜索"/>
        <v-dialog v-model="dialog" fullscreen>
           <template v-slot:activator="{ on }">
             <v-btn v-on="on" color="primary" class="mx-5">
               <v-icon>add</v-icon>
               新增素材
             </v-btn>
           </template>
             <v-card tile>
               <v-app-bar color="primary" fixed dense>
                <v-toolbar-title><span class="white--text">编辑图文消息素材</span></v-toolbar-title>
                <v-spacer></v-spacer>
                <v-btn @click="sumbitHandle" :loading="btnLoading" color="secondary"><v-icon>save</v-icon>保存</v-btn>
                <v-btn disabled class="mx-2" @click="cancelHandle" :loading="btnLoading" color="accent"><v-icon>zoom_in</v-icon>预览</v-btn>
                <v-btn disabled class="mx-2" @click="cancelHandle" :loading="btnLoading" color="info"><v-icon>send</v-icon>保存并群发</v-btn>
                <v-btn @click="cancelHandle" :loading="btnLoading"><v-icon>close</v-icon>取消</v-btn>
               </v-app-bar>
               <v-form ref="dialogForm">
                <v-container style="margin-top:40px;">
                  <v-row class="mt-5">
                    <v-col cols="12" sm="3">
                      <MaterialSelect type="image" v-bind.sync="formData"/>
                      <v-textarea
                        label="摘要"
                        solo
                        counter="120"
                        class="my-3"
                        v-model="formData.digest"
                        name="digest"
                        v-validate="'max:64'"
                        :error-messages="errors.collect('digest')"
                        data-vv-as="摘要"
                        placeholder="图文消息的摘要，默认抓取正文前64个字"/>
                    </v-col>
                    <v-col cols="12" sm="9">
               <v-text-field
                prepend-icon="title"
                label="标题"
                v-model="formData.title"
                hint="*必输项"
                :persistent-hint="formData.title===''"
                name="title"
                v-validate="'required|max:40'"
                :error-messages="errors.collect('title')"
                data-vv-as="标题"
                placeholder="请输入标题"/>
              <!-- <v-textarea label="正文" prepend-icon="description" hint="*必填项" v-model="formData.content"></v-textarea> -->
              <VTinymce v-model="formData.content"/>
              <v-row>
                <v-col>
                  <v-text-field
                  v-model="formData.content_source_url"
                    label="原文地址"
                    hint="*必填项"
                    name="url"
                    prepend-icon="link"
                    v-validate="'required|url'"
                    :error-messages="errors.collect('url')"
                    data-vv-as="原文地址链接地址"></v-text-field>
                </v-col>
                <v-col>
                  <v-text-field prepend-icon="person" label="作者" hint="*必填项" v-model="formData.author"></v-text-field>
                </v-col>
              </v-row>
              <v-row>
              <v-col><v-checkbox dense hide-details :label="formData.show_cover_pic === 1? '显示封面':'不显示封面'" v-model="formData.show_cover_pic" true-value="1" false-value="0"></v-checkbox></v-col>
              <v-col><v-checkbox dense hide-details :label="formData.need_open_comment === 1? '打开评论':'关闭评论'" v-model="formData.need_open_comment" true-value="1" false-value="0"></v-checkbox></v-col>
              <v-col><v-checkbox dense hide-details :label="formData.only_fans_can_comment === 1? '所有人可评论':'粉丝才可评论'" v-model="formData.only_fans_can_comment" true-value="1" false-value="0"></v-checkbox></v-col>
              </v-row>
               </v-col>
                 </v-row>
           </v-container></v-form>
             </v-card>
        </v-dialog>
      </v-toolbar>
     </template>
    <template v-slot:default="props">
      <v-row>
        <v-col v-for="item in props.items" :key="item.name" cols="12" sm="6" md="4" lg="3">
          <v-hover v-slot:default="{ hover }">
          <v-card>
            <v-img :aspect-ratio="16/9" height="200" :src="item.fileurl">
              <v-expand-transition>
                <div
                  v-if="hover"
                  class="d-flex transition-fast-in-fast-out orange darken-2 v-card--reveal display-3 white--text"
                  style="height: 30%;">
                  <v-btn icon large class="v-card-hover-btn mx-3" color="secondary" @click="itemPreviewHandle(item)"><v-icon x-large>zoom_in</v-icon></v-btn>
                  <v-btn icon large class="v-card-hover-btn mx-3" color="delete" @click="itemDeleteHandle(item)"><v-icon x-large>delete</v-icon></v-btn>
                </div>
              </v-expand-transition>
            </v-img>
            <v-card-title class="pa-2">
              <span class="text-over-one">{{item.title}}</span>
            </v-card-title>
          </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </template>
    <template v-slot:footer>
      <span>共{{itemsTotal}}条数据</span>
      <v-pagination v-model="page" :length="pageLength" @input="fetchData"></v-pagination>
    </template>
    </v-data-iterator>
  <!-- </v-container> -->
</template>
<script>
import * as API from '@/api/admin/wx-material.js'
import MaterialSelect from './MaterialSelect.vue'
import VTinymce from './MaterialArticalEditor.vue'
export default {
  name: 'MaterialArtical',
  components: { MaterialSelect, VTinymce },
  props: {
    type: {
      type: String,
      default: 'artical'
    }
  },
  data: function () {
    return {
      searchTitle: '',
      btnLoading: false,
      tableLoading: true,
      dialog: false,
      items: [],
      itemsPerPage: 10,
      page: 1,
      sortBy: 'id',
      sortDesc: true,
      itemsTotal: 0,
      pageLength: 1,
      formData: {
        thumb_media_id: '',
        title: '',
        type: this.type,
        filename: '',
        filepath: '',
        fileurl: '',
        filehash: '',
        content: '',
        digest: '',
        content_source_url: '',
        show_cover_pic: '0',
        need_open_comment: '0',
        only_fans_can_comment: '0'
      }
    }
  },
  created: function () {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.tableLoading = true
      API.fetchList({
        sort: this.sortBy,
        descending: this.sortDesc,
        page: this.page,
        page_size: this.itemsPerPage,
        search:
          {
            type: this.type,
            title: this.searchTitle
          }
      }).then(res => {
        this.itemsTotal = res.data.total
        this.pageLength = res.data.last_page
        this.items = res.data.data
      }).finally(() => {
        this.tableLoading = false
      })
    },
    itemPreviewHandle(item) {
      this.$imagePreview([
        {
          src: item.fileurl,
          w: 500,
          h: 600
        }
      ])
    },
    itemDeleteHandle(item) {
      if (confirm('是否确定删除？删除后无法恢复，请慎重！')) {
        API.deleteOne(item.id).then(res => {
          this.fetchData()
          this.$toasted.success(res.data)
        }).catch(err => {
          return Promise.reject(err)
        })
      }
    },
    changeHandle() {
      this.fetchData()
    },
    cancelHandle() {
      this.dialog = false
      this.$refs.dialogForm.reset()
      this.$refs.dialogForm.resetValidation()
    },
    sumbitHandle() {
      this.$validator.validate().then(result => {
        if (result) {
          this.btnLoading = true
          API.upload(this.formData).then(res => {
            this.dialog = false
            this.$refs.dialogForm.reset()
            this.formData = this.$options.data().formData
            this.$toasted.success(res.data)
            this.fetchData()
          }).finally(() => {
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>
<style>
.text-over-one{
  height: 20px !important;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.v-card--reveal {
  align-items: center;
  bottom: 0;
  justify-content: center;
  opacity: 1;
  position: absolute;
  width: 100%;
}
.v-card-hover-btn{
  opacity: 1 !important;
}
</style>
